<template>
  <view class="bill-page">
    <image class="page-bg" src="/static/images/bg.png" mode="aspectFill" />
    <CustomNavbar title="我的账单" />
    
    <view class="page-content" :style="{ paddingTop: navBarHeight + 'px' }">
      <!-- 账单摘要卡片 -->
      <view class="bill-summary-card">
        <view class="customer-info">
          <text class="info-label">客户名称:</text>
          <text class="info-label">{{ billData.acctName }}</text>
        </view>
        <view class="customer-info">
          <text class="info-value">账单周期:</text>
          <text class="info-value">{{ billDay }}</text>
        </view>
        
        <!-- 月份标签 -->
        <view class="month-tabs">
          <view 
            class="tab-item" 
            v-for="(month, index) in monthTabs" 
            :key="index"
            :class="{ active: currentMonth === index }"
            @click="switchMonth(month,index)"
          >
            {{ month }}
          </view>
        </view>
        
        <view class="images-container">
          <!-- 第一张图片 -->
          <view class="account-label">
            <image class="bg-image bg-image-1" src="/static/images/bill-bg1.png" mode="aspectFill" />
            <text class="account-label-text">账户下的所有号码</text>
          </view>
          
          <!-- 第二张图片（覆盖在第一张上面，错开50rpx） -->
          <view class="total-amount-section">
            <image class="bg-image bg-image-2" src="/static/images/bill-bg2.png" mode="aspectFill" />
            <view class="amount-content">
              <text class="total-amount">{{ (billData.sumCharge/100).toFixed(2) }}</text>
              <text class="amount-label">本期实际消费(元)</text>
              <text class="amount-tip">(实时费用仅供参考,请以月末结账后月账单为准)</text>
            </view>
          </view>
        </view>
      </view>
      <view class="footer-content">
      
      <!-- 账单项目列表 -->
        <view class="bill-items">
          <!-- <view 
            class="bill-item-card" 
            v-for="(items, indexs) in billItems" 
            :key="indexs"
          > -->
          <view 
            class="bill-item-card" 
            v-for="(items, indexs) in billData.itemInformationList?.filter(item => item.showLevel == 1)" 
            :key="indexs"
          >
            <!-- 卡片头部 -->
          
              <view  class="card-header">
                <text class="card-title">{{ items.productOffName }}</text>
              </view>
              <view v-for="(item1,index1) in billData.itemInformationList.filter(item => item.showLevel == 2 && item.parentClassId == items.classId && '合计' != item.chargeTypeName)"
                 :key="index1" class="bill-item">
              <!-- <view v-if="items.showLevel == 2 && items.classId == items.parentClassId" class="bill-item">  -->
                  <!-- 账户信息 -->
                  <view class="account-info">
                    <view class="account-left">
                      <!-- <image class="account-icon" v-if="items.type === 'mobile'" src="/static/icons/icon-phone.png" mode="aspectFit" />
                      <image class="account-icon broadband" v-if="items.type === 'broadband'" src="/static/icons/icon-wifi.png" mode="aspectFit" /> -->
                      <image class="account-icon broadband" v-if="item1.productOffName.includes('宽带') " src="/static/icons/icon-wifi.png" mode="aspectFit" />
                      <image class="account-icon" v-else  src="/static/icons/icon-phone.png" mode="aspectFit" />
                      
                      <text class="account-text">{{ item1.chargeTypeName }}</text>
                    </view>
                    <view class="expand-btn" @click="toggleExpand(item1.classId)">
                      <text class="expand-text">{{ item1.expanded ? '全部收起' : '全部展开' }}</text>
                      <text class="expand-icon" :class="{ expanded: item1.expanded }">▼</text>
                    </view>
                  </view>
                  
                  <!-- 展开的详细内容 -->
                  <view class="bill-details" v-if="item1.expanded">
                    <!-- 只遍历 level 3 且 parentClassId 等于 item1.classId 的项目 -->
                    <view class="detail-category" 
                          v-for="(item2, index2) in billData.itemInformationList.filter(item => item.showLevel == 3 && item.parentClassId == item1.classId && '小计' != item.chargeTypeName)" 
                          :key="index2">
                        <text class="category-title">{{ item2.chargeTypeName }}</text>
                        <view class="detail-list">
                          <!-- 只遍历 level 4 且 parentClassId 等于 item2.classId 的项目 -->
                          <view class="detail-row" 
                                v-for="(item3, index3) in billData.itemInformationList.filter(item => item.showLevel == 4 && item.parentClassId == item2.classId )" 
                                :key="index3">
                              <view class="detail-left">
                                <text class="detail-name">{{ item3.chargeTypeName }}</text>
                              </view>
                              <view class="detail-right">
                                <text class="detail-original">原价 {{ item3.chargeShouldPay / 100 }}</text>
                                <text class="detail-discount" :class="{ 'has-discount': hasDiscount(item3.chargeDiscount / 100) }">
                                  减免 {{ item3.chargeDiscount / 100 }}
                                </text>
                                <text class="detail-actual">实际 {{ item3.charge / 100 }}</text>
                              </view>

                          
                          </view>

                        </view>
              
                    </view>
                    
                  </view>
                  
                  <!-- 小计 -->
                  <view class="subtotal-row">
                    <text class="subtotal-label">小计</text>
                    <view class="subtotal-values">
                      <text class="subtotal-original">原价 {{ item1.chargeShouldPay/100 }}</text>
                      <text class="subtotal-discount" :class="{ 'has-discount': hasDiscount(item1.chargeDiscount/100) }">
                        减免 {{ item1.chargeDiscount/100 }}
                      </text>
                      <text class="subtotal-actual">实际消费 {{ item1.charge/100 }}</text>
                    </view>
                  </view>

          
                <!----- 111 -->
                
              </view>
           
            
            
            
          </view>
        </view>
        
        <!-- 合计卡片 -->
        <view class="total-card">
          <view class="total-row">
            <text class="total-label">合计</text>
            <text class="total-value">{{(billData.sumCharge/100).toFixed(2)}}</text>
          </view>
          <view class="savings-info">
            <text class="savings-text">
              本期中国电信为您节省
              <text class="savings-amount">{{ discountMoney/100 }}</text>
              元
            </text>
            <text class="savings-formula">
              为您节省金额=本期赠费抵扣金额+减免合计金额
            </text>
          </view>
        </view>
        
        <!-- 温馨提示 -->
        <view class="tips-card">
          <view class="tips-header">
            <text class="tips-title">温馨提示</text>
          </view>
          <view class="tips-content">
            <text class="tip-item">1、以上是您本月通信账户订购、消费中国电信业务/服务的记录，通过第三方支付的消费请您至所用支付工具中查询。</text>
            <text class="tip-item">2、除特别说明，以上“国内”不含港澳台。</text>
            <text class="tip-item">3 、如对账单存在疑问，可点击在线客服咨询。</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import CustomNavbar from '@/components/CustomNavbar.vue'
import { api } from '@/utils/api'

const billDay = ref('')

const discountMoney = ref(0)

const navBarHeight = ref(88)
const currentMonth = ref(0)
const monthTabs = ref(['9月', '8月', '7月', '6月', '5月', '4月', '3月'])

const billData = ref({})

const billItems = ref([
  {
    title: '畅享套餐99元',
    titleId: '1',
    list:[
      {
        account: '手机号:18999930691(主卡)',
        type: 'mobile',
        expanded: false,
        categories: [
          {
            title: '●套餐及固定费',
            items: [
              { name: '畅享套餐 99元', original: '39.6', discount: '0', actual: '39.6' },
              { name: '套餐升级专属权益 30GB流量月包(10元/月)', original: '10', discount: '0', actual: '10' },
              { name: '天翼云电脑标准版-69元', original: '69', discount: '-30', actual: '39' }
            ]
          },
          {
            title: '●综合信息服务费',
            items: [
              { name: '公众视频彩铃基础会员功能费', original: '1.2', discount: '-1.2', actual: '0' }
            ]
          }
        ],
        subtotal: {
          original: '119.8',
          discount: '-31.2',
          actual: '88.6'
        }
      },
      {
        title: '副卡',
        account: '手机号:18999930692(副卡)',
        type: 'mobile',
        expanded: false,
        categories: [],
        subtotal: {
          original: '10',
          discount: '0',
          actual: '10'
        }
      }
    ]
  },
  {
    title: '201804-30元200M宽带电视礼包',
    titleId: '2',
    list:[
      { 
        account: '宽带账号:18999930691',
        type: 'broadband',
        expanded: false,
        categories: [],
        subtotal: {
          original: '10',
          discount: '0',
          actual: '10'
        }
      }
    ]
  }
])

// onMounted(async () => {
//   let params = {
//     month:'202510'
//     // month: new Date().getMonth() + 1,
//     // year: new Date().getFullYear()
//   }

//   uni.request({
//   url: 'http://135.224.115.248:12018/xjwechat/basicServices/payInfo',
//   method: 'GET',
//   data: {
//     month:'202510'
//   },
//   header: {
//     'content-type': 'application/json',
//     'openid':'o2ZW7jmGuJ7DWVwRF3_qtyShYGIw'
//   },
//   success: (res) => {
//     console.log('请求成功:', res.data)
//   },
//   fail: (err) => {
//     console.error('请求失败:', err)
//   }
// })

// })

onMounted(() => {
  const windowInfo = uni.getWindowInfo()
  const statusBarHeight = windowInfo.statusBarHeight || 0
  navBarHeight.value = statusBarHeight + 44

  let Num = monthTabs.value[currentMonth.value].replace('月', '')>10?monthTabs.value[currentMonth.value].replace('月', ''):'0'+monthTabs.value[currentMonth.value].replace('月', '')
  getData(new Date().getFullYear() + Num)
 
})

const getData = async (month) => {
  api.getBillList({
    month:month
  }).then(res => {
    console.log('实时账单查询1111 = :', JSON.stringify(res))
    //  let res = {"msg":"账单明细查询成功","code":200,"data":{"code":"0","mx":"[{\"billingCycleId\":202510,\"acctName\":\"王飞\",\"sumCharge\":16800,\"chargePayed\":16800,\"chargeShouldPayed\":16800,\"chargeFreeDiscount\":0,\"chargeCorpusDiscount\":16800,\"accNbrDetail\":\"手机号:18999930691;宽带账号:18999930691;天翼高清:18999930691;手机号:18199890691;虚拟网:103116961265;手机号:13325629958\",\"chargeTotalDiscount\":8100,\"itemInformationList\":[{\"showLevel\":\"1\",\"classId\":811,\"parentClassId\":0,\"productOffName\":\"电信畅享99元20G套餐(升级版)\",\"accNbrDetail\":\"手机号:18999930691;手机号:13325629958;手机号:18199890691\",\"chargeTypeName\":\"电信畅享99元20G套餐(升级版)及叠加包\",\"charge\":16800,\"drillType\":\"\",\"drillId\":\"\",\"offerId\":999900316,\"chargeShouldPay\":21900,\"chargeDiscount\":-5100},{\"showLevel\":\"2\",\"classId\":8211,\"parentClassId\":811,\"productOffName\":\"电信畅享99元20G套餐(升级版)\",\"accNbrDetail\":\"手机号:18999930691\",\"chargeTypeName\":\"手机号:18999930691(主卡)\",\"charge\":14800,\"drillType\":\"\",\"drillId\":\"\",\"offerId\":999900316,\"chargeShouldPay\":18100,\"chargeDiscount\":-3300},{\"showLevel\":\"3\",\"classId\":83111,\"parentClassId\":8211,\"productOffName\":\"电信畅享99元20G套餐(升级版)\",\"accNbrDetail\":\"手机号:18999930691\",\"chargeTypeName\":\"套餐及固定费\",\"charge\":14800,\"drillType\":\"\",\"drillId\":\"\",\"offerId\":999900316,\"chargeShouldPay\":17800,\"chargeDiscount\":-3000},{\"showLevel\":\"4\",\"classId\":841111,\"parentClassId\":83111,\"productOffName\":\"电信畅享99元20G套餐(升级版)\",\"accNbrDetail\":\"手机号:18999930691\",\"chargeTypeName\":\"电信畅享99元20G套餐(升级版)\",\"charge\":9900,\"drillType\":\"1\",\"drillId\":\"910189921641\",\"acctItemInformation\":[{\"acctItemId\":463958047607,\"acctItemType\":362025100,\"acctItemTypeName\":\"套餐月使用费\",\"prodInstId\":105215201634,\"amount\":9900,\"balancePaid\":9900,\"itemSourceId\":33,\"serviceId\":13,\"latnId\":1010,\"offerInstId\":910189921641}],\"offerId\":999900316,\"chargeShouldPay\":9900,\"chargeDiscount\":0},{\"showLevel\":\"4\",\"classId\":841112,\"parentClassId\":83111,\"productOffName\":\"电信畅享99元20G套餐(升级版)\",\"accNbrDetail\":\"手机号:18999930691\",\"chargeTypeName\":\"套餐升级专属权益30GB流量月包（10元/月）\",\"charge\":1000,\"drillType\":\"2\",\"drillId\":\"910836330052\",\"acctItemInformation\":[{\"acctItemId\":463974079726,\"acctItemType\":302010180,\"acctItemTypeName\":\"手机流量包租费\",\"prodInstId\":106241871198,\"amount\":333,\"balancePaid\":333,\"itemSourceId\":9,\"serviceId\":14,\"latnId\":1010,\"offerInstId\":910836330052}],\"offerId\":999900316,\"chargeShouldPay\":1000,\"chargeDiscount\":0},{\"showLevel\":\"4\",\"classId\":841113,\"parentClassId\":83111,\"productOffName\":\"电信畅享99元20G套餐(升级版)\",\"accNbrDetail\":\"手机号:18999930691\",\"chargeTypeName\":\"天翼云电脑标准版-69元\",\"charge\":3900,\"drillType\":\"2\",\"drillId\":\"910600365103\",\"acctItemInformation\":[{\"acctItemId\":463958047605,\"acctItemType\":411910075,\"acctItemTypeName\":\"云电脑使用费\",\"prodInstId\":105215201634,\"amount\":6900,\"balancePaid\":6900,\"itemSourceId\":9,\"serviceId\":14,\"latnId\":1010,\"offerInstId\":910600365103}],\"offerId\":999900316,\"chargeShouldPay\":6900,\"chargeDiscount\":-3000},{\"showLevel\":\"3\",\"classId\":83112,\"parentClassId\":8211,\"productOffName\":\"电信畅享99元20G套餐(升级版)\",\"accNbrDetail\":\"手机号:18999930691\",\"chargeTypeName\":\"综合信息服务费\",\"charge\":0,\"drillType\":\"\",\"drillId\":\"\",\"offerId\":999900316,\"chargeShouldPay\":300,\"chargeDiscount\":-300},{\"showLevel\":\"4\",\"classId\":841121,\"parentClassId\":83112,\"productOffName\":\"电信畅享99元20G套餐(升级版)\",\"accNbrDetail\":\"手机号:18999930691\",\"chargeTypeName\":\"公众视频彩铃基础会员功能费\",\"charge\":0,\"drillType\":\"\",\"drillId\":\"\",\"acctItemInformation\":[{\"acctItemId\":463898294050,\"acctItemType\":411910666,\"acctItemTypeName\":\"公众视频彩铃基础会员功能费\",\"prodInstId\":105215201634,\"amount\":-300,\"balancePaid\":-300,\"itemSourceId\":4,\"serviceId\":14,\"latnId\":1010,\"offerInstId\":910616652232},{\"acctItemId\":463898294048,\"acctItemType\":411910666,\"acctItemTypeName\":\"公众视频彩铃基础会员功能费\",\"prodInstId\":105215201634,\"amount\":300,\"balancePaid\":300,\"itemSourceId\":4,\"serviceId\":14,\"latnId\":1010,\"offerInstId\":910616652226}],\"offerId\":999900316,\"chargeShouldPay\":300,\"chargeDiscount\":-300},{\"showLevel\":\"3\",\"classId\":858211,\"parentClassId\":8211,\"productOffName\":\"电信畅享99元20G套餐(升级版)\",\"accNbrDetail\":\"手机号:18999930691\",\"chargeTypeName\":\"小计\",\"charge\":14800,\"drillType\":\"\",\"drillId\":\"\",\"offerId\":999900316,\"chargeShouldPay\":18100,\"chargeDiscount\":-3300},{\"showLevel\":\"2\",\"classId\":8212,\"parentClassId\":811,\"productOffName\":\"电信畅享99元20G套餐(升级版)\",\"accNbrDetail\":\"手机号:18199890691\",\"chargeTypeName\":\"手机号:18199890691(副卡)\",\"charge\":1000,\"drillType\":\"\",\"drillId\":\"\",\"offerId\":999900316,\"chargeShouldPay\":1900,\"chargeDiscount\":-900},{\"showLevel\":\"3\",\"classId\":83121,\"parentClassId\":8212,\"productOffName\":\"电信畅享99元20G套餐(升级版)\",\"accNbrDetail\":\"手机号:18199890691\",\"chargeTypeName\":\"套餐及固定费\",\"charge\":1000,\"drillType\":\"\",\"drillId\":\"\",\"offerId\":999900316,\"chargeShouldPay\":1900,\"chargeDiscount\":-900},{\"showLevel\":\"4\",\"classId\":841211,\"parentClassId\":83121,\"productOffName\":\"电信畅享99元20G套餐(升级版)\",\"accNbrDetail\":\"手机号:18199890691\",\"chargeTypeName\":\"畅享19元副卡功能费201802\",\"charge\":1000,\"drillType\":\"2\",\"drillId\":\"910189927581\",\"acctItemInformation\":[{\"acctItemId\":463974079725,\"acctItemType\":411582220,\"acctItemTypeName\":\"副卡功能费\",\"prodInstId\":106241871198,\"amount\":1900,\"balancePaid\":1900,\"itemSourceId\":9,\"serviceId\":14,\"latnId\":1010,\"offerInstId\":910189927581}],\"offerId\":999900316,\"chargeShouldPay\":1900,\"chargeDiscount\":-900},{\"showLevel\":\"3\",\"classId\":858212,\"parentClassId\":8212,\"productOffName\":\"电信畅享99元20G套餐(升级版)\",\"accNbrDetail\":\"手机号:18199890691\",\"chargeTypeName\":\"小计\",\"charge\":1000,\"drillType\":\"\",\"drillId\":\"\",\"offerId\":999900316,\"chargeShouldPay\":1900,\"chargeDiscount\":-900},{\"showLevel\":\"2\",\"classId\":8213,\"parentClassId\":811,\"productOffName\":\"电信畅享99元20G套餐(升级版)\",\"accNbrDetail\":\"手机号:13325629958\",\"chargeTypeName\":\"手机号:13325629958(副卡)\",\"charge\":1000,\"drillType\":\"\",\"drillId\":\"\",\"offerId\":999900316,\"chargeShouldPay\":1900,\"chargeDiscount\":-900},{\"showLevel\":\"3\",\"classId\":83131,\"parentClassId\":8213,\"productOffName\":\"电信畅享99元20G套餐(升级版)\",\"accNbrDetail\":\"手机号:13325629958\",\"chargeTypeName\":\"套餐及固定费\",\"charge\":1000,\"drillType\":\"\",\"drillId\":\"\",\"offerId\":999900316,\"chargeShouldPay\":1900,\"chargeDiscount\":-900},{\"showLevel\":\"4\",\"classId\":841311,\"parentClassId\":83131,\"productOffName\":\"电信畅享99元20G套餐(升级版)\",\"accNbrDetail\":\"手机号:13325629958\",\"chargeTypeName\":\"畅享19元副卡功能费201802\",\"charge\":1000,\"drillType\":\"2\",\"drillId\":\"910189927539\",\"acctItemInformation\":[{\"acctItemId\":463898294053,\"acctItemType\":411582220,\"acctItemTypeName\":\"副卡功能费\",\"prodInstId\":105162728256,\"amount\":1900,\"balancePaid\":1900,\"itemSourceId\":9,\"serviceId\":14,\"latnId\":1010,\"offerInstId\":910189927539}],\"offerId\":999900316,\"chargeShouldPay\":1900,\"chargeDiscount\":-900},{\"showLevel\":\"3\",\"classId\":858213,\"parentClassId\":8213,\"productOffName\":\"电信畅享99元20G套餐(升级版)\",\"accNbrDetail\":\"手机号:13325629958\",\"chargeTypeName\":\"小计\",\"charge\":1000,\"drillType\":\"\",\"drillId\":\"\",\"offerId\":999900316,\"chargeShouldPay\":1900,\"chargeDiscount\":-900},{\"showLevel\":\"2\",\"classId\":86811,\"parentClassId\":811,\"productOffName\":\"电信畅享99元20G套餐(升级版)\",\"accNbrDetail\":\"手机号:18999930691;手机号:13325629958;手机号:18199890691\",\"chargeTypeName\":\"合计\",\"charge\":16800,\"drillType\":\"\",\"drillId\":\"\",\"offerId\":999900316,\"chargeShouldPay\":21900,\"chargeDiscount\":-5100},{\"showLevel\":\"1\",\"classId\":812,\"parentClassId\":0,\"productOffName\":\"201804--30元200M宽带电视礼包\",\"accNbrDetail\":\"宽带账号:18999930691;天翼高清:18999930691\",\"chargeTypeName\":\"201804--30元200M宽带电视礼包及叠加包\",\"charge\":0,\"drillType\":\"\",\"drillId\":\"\",\"offerId\":995069635,\"chargeShouldPay\":3000,\"chargeDiscount\":-3000},{\"showLevel\":\"2\",\"classId\":8221,\"parentClassId\":812,\"productOffName\":\"201804--30元200M宽带电视礼包\",\"accNbrDetail\":\"宽带账号:18999930691\",\"chargeTypeName\":\"宽带账号:18999930691\",\"charge\":0,\"drillType\":\"\",\"drillId\":\"\",\"offerId\":995069635,\"chargeShouldPay\":3000,\"chargeDiscount\":-3000},{\"showLevel\":\"3\",\"classId\":83211,\"parentClassId\":8221,\"productOffName\":\"201804--30元200M宽带电视礼包\",\"accNbrDetail\":\"宽带账号:18999930691\",\"chargeTypeName\":\"套餐及固定费\",\"charge\":0,\"drillType\":\"\",\"drillId\":\"\",\"offerId\":995069635,\"chargeShouldPay\":3000,\"chargeDiscount\":-3000},{\"showLevel\":\"4\",\"classId\":842111,\"parentClassId\":83211,\"productOffName\":\"201804--30元200M宽带电视礼包\",\"accNbrDetail\":\"宽带账号:18999930691\",\"chargeTypeName\":\"201804--30元200M宽带电视礼包\",\"charge\":0,\"drillType\":\"1\",\"drillId\":\"910189936977\",\"acctItemInformation\":[{\"acctItemId\":463958046670,\"acctItemType\":362025100,\"acctItemTypeName\":\"套餐月使用费\",\"prodInstId\":101001027146,\"amount\":1500,\"balancePaid\":1500,\"itemSourceId\":33,\"serviceId\":13,\"latnId\":1010,\"offerInstId\":910189936977}],\"offerId\":995069635,\"chargeShouldPay\":3000,\"chargeDiscount\":-3000},{\"showLevel\":\"3\",\"classId\":858221,\"parentClassId\":8221,\"productOffName\":\"201804--30元200M宽带电视礼包\",\"accNbrDetail\":\"宽带账号:18999930691\",\"chargeTypeName\":\"小计\",\"charge\":0,\"drillType\":\"\",\"drillId\":\"\",\"offerId\":995069635,\"chargeShouldPay\":3000,\"chargeDiscount\":-3000},{\"showLevel\":\"2\",\"classId\":86812,\"parentClassId\":812,\"productOffName\":\"201804--30元200M宽带电视礼包\",\"accNbrDetail\":\"宽带账号:18999930691;天翼高清:18999930691\",\"chargeTypeName\":\"合计\",\"charge\":0,\"drillType\":\"\",\"drillId\":\"\",\"offerId\":995069635,\"chargeShouldPay\":3000,\"chargeDiscount\":-3000}],\"chargeFreeInformationList\":[]}]","desc":"操作成功"}}

    // let pardata = JSON.parse(res.data.mx)[0]
    // console.log('请求成功 111:', pardata)
    let discountM = 0.0
    JSON.parse(res.data.mx)[0].itemInformationList.forEach(item => {
      item.expanded = false
      if ("2" == item.showLevel  && "合计" != item.chargeTypeName) {
            console.log('item.chargeDiscount:', item.chargeDiscount)
            discountM += Math.abs(item.chargeDiscount)
          }
      
    })
    discountMoney.value = discountM

    billData.value = JSON.parse(res.data.mx)[0]
    console.log('请求成功:', billData.value.acctName)

    billDay.value = getStartDay(monthTabs.value[currentMonth.value]) +'-'+ getEndDay(monthTabs.value[currentMonth.value])
    console.log('账单周期:', billDay.value)

  }).catch(err => {
    console.error('实时账单查询失败:', err)
  })
  
}

const switchMonth = (month,index) => {
  currentMonth.value = index
  // getBillList({month:monthTabs.value[index]})
  console.log('切换月份:', month)
  

  billDay.value = getStartDay(month) +'-'+ getEndDay(month)

  let Num = month.replace('月', '')>10?month.replace('月', ''):'0'+month.replace('月', '')
  console.log('Num:', Num)

  getData(new Date().getFullYear() + Num)

  console.log('账单周期:', billDay.value)
}

const getStartDay = (month) => {
  const monthNum = parseInt(month)
  const currentYear = new Date().getFullYear()
  return currentYear + '.' + (monthNum<10 ? '0'+monthNum : monthNum) + '.' + '01'
}

const getEndDay = (month) => {
  const monthNum = parseInt(month)
  const currentYear = new Date().getFullYear()
  const lastDay = new Date(currentYear, monthNum, 0).getDate()
  return currentYear + '.' + (monthNum<10 ? '0'+monthNum : monthNum) + '.' + lastDay
}

const toggleExpand = (indexs) => {
  billData.value.itemInformationList.forEach(item => {
    if(item.classId == indexs){
      item.expanded = !item.expanded
    }
  })
  // billData.value[indexs].expanded = !billData.value[indexs].expanded
  // billItems.value[indexs].list[index].expanded = !billItems.value[indexs].list[index].expanded
}

const hasDiscount = (discount) => {
  return parseFloat(discount) < 0
}
</script>

<style scoped>
.bill-page {
   
  position: relative;
  z-index: 1;
}

.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  object-fit: cover;
}

.page-content {
  position: relative;
  z-index: 2;
  padding-bottom: 40rpx;
}

/* 账单摘要卡片 */
.bill-summary-card {
  /* background: #fff; */
  border-radius: 40rpx 40rpx 0 0;
  padding: 40rpx 32rpx 0 32rpx;
  /* margin-top: 20rpx;  */
}

.customer-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.info-label {
  color: rgba(255, 255, 255, 1);
font-family: HarmonyOS Sans SC;
font-size: 32rpx;
font-weight: 700;
line-height: 38rpx;
margin-right: 16rpx;
}

.info-value {
  color: rgba(255, 255, 255, 0.8);
font-family: HarmonyOS Sans SC;
font-size: 24rpx;
font-weight: 400;
line-height: 28rpx;
margin-right: 16rpx;
}

/* 月份标签 */
.month-tabs {
  display: flex;
  /* gap: 20rpx; */
  justify-content: space-around;
  text-align: center;
    align-items: center;
  margin: 30rpx 0;
  overflow-x: auto;
}

.tab-item {
  padding: 8rpx 16rpx;
  color: rgba(255, 255, 255, 0.8);
font-family: HarmonyOS Sans SC;
font-size: 32rpx;
font-weight: 400;
line-height: 38rpx;
  border-radius: 8rpx;
  white-space: nowrap;
}

.tab-item.active {
  border-radius: 20px;
backdrop-filter: blur(8px);
background: rgba(255, 255, 255, 1);
  color: rgba(78, 138, 254, 1);
}

.images-container {
  position: relative;
  /* margin-bottom: 30rpx; */
      min-height: 278rpx; /* 120rpx + 226rpx - 50rpx = 296rpx，确保两张图片都能完整显示 */
}

.account-label {
  position: relative;
  width: 670rpx;
  height: 120rpx;
  margin: 0 auto;
  display: flex;
  /* align-items: center;
  justify-content: center; */
  z-index: 1;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bg-image-1 {
  z-index: 1;
}

.bg-image-2 {
  z-index: 2;
}

.account-label-text {
  position: relative;
  z-index: 3;
  color: rgba(255, 255, 255, 1);
font-family: HarmonyOS Sans SC;
font-size: 24rpx;
font-weight: 400;
line-height: 28rpx;
margin: 16rpx 24rpx;
}

/* 总金额显示 */
.total-amount-section {
  position: absolute;
  top: 50rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 670rpx;
  height: 226rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.amount-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.total-amount {
  color: rgba(255, 255, 255, 1);
font-family: HarmonyOS Sans SC;
font-size: 56rpx;
font-weight: 500;
line-height: 66rpx;
  line-height: 1;
  margin-bottom: 16rpx;
}

.amount-label {
  color: rgba(255, 255, 255, 1);
font-family: HarmonyOS Sans SC;
font-size: 24rpx;
font-weight: 400;
line-height: 28rpx;
  margin-bottom: 12rpx;
}

.amount-tip {
  color: rgba(255, 255, 255, 0.6);
font-family: HarmonyOS Sans SC;
font-size: 24rpx;
font-weight: 400;
line-height: 28rpx;
  text-align: center;
}
.footer-content {
  position: relative;
  margin-top: -40rpx;
  border-radius: 16rpx;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10rpx);
  -webkit-backdrop-filter: blur(10rpx);
  z-index: 10;
  padding-top: 56rpx;
  overflow: visible;
  /* 使用 clip-path 在顶部中间创建倒三角缺口：宽60rpx，高30rpx */
  clip-path: polygon(
    0% 0%,
    calc(50% - 30rpx) 0%,
    50% 30rpx,
    calc(50% + 30rpx) 0%,
    100% 0%,
    100% 100%,
    0% 100%
  );
}

/* 账单项目卡片 */
.bill-items {
  padding: 0 32rpx;
}

.bill-item-card {
  /* border-radius: 16rpx; */
/* background: rgba(196, 196, 196, 1); */
  margin-bottom: 24rpx; 
  overflow: hidden;
}

.card-header {
  /* background: #333; */
  padding: 24rpx 32rpx;
}
.bill-item{
  box-shadow: 8rpx 8rpx 8rpx 8rpx rgba(125, 182, 251, 0.1);
  margin-bottom: 30rpx;
}
.card-title {
  color: rgba(51, 51, 51, 1);
font-family: HarmonyOS Sans SC;
font-size: 32rpx;
font-weight: 700;
line-height: 38rpx;
}

.account-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 32rpx;
  border-radius: 8px 8px 0px 0px;
background: rgba(240, 246, 255, 1);
color: rgba(78, 138, 254, 1);
font-family: HarmonyOS Sans SC;
font-size: 28rpx;
line-height: 32rpx;
}

.account-left {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.account-icon {
  width: 32rpx;
  height: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  /* color: #4A90E2; */
  /* border: 2rpx solid #4A90E2; */
  /* border-radius: 4rpx; */
}

.account-icon.broadband {
  border: none;
  font-size: 28rpx;
}

/* .account-text {
  font-size: 28rpx;
  color: #333;
} */

.expand-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 8rpx 16rpx;
}

/* .expand-text {
  font-size: 28rpx;
  color: #4A90E2;
} */

.expand-icon {
  font-size: 20rpx;
  color: #4A90E2;
  transition: transform 0.3s;
}

.expand-icon.expanded {
  transform: rotate(180deg);
}

/* 账单详情 */
.bill-details {
  padding: 0 32rpx;
  border-bottom: 1rpx solid #F0F0F0;
}

.detail-category {
  padding: 24rpx 0;
}

.category-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 16rpx;
  display: block;
}

.detail-list {
  padding-left: 20rpx;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #F5F5F5;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-left {
  flex: 1;
}

.detail-name {
  font-size: 28rpx;
  color: #666;
}

.detail-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4rpx;
}

.detail-original,
.detail-discount,
.detail-actual {
  font-size: 24rpx;
  color: #666;
}

.detail-discount.has-discount {
  color: #FF5722;
}

/* 小计 */
.subtotal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  background: #F8F8F8;
}

.subtotal-label {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.subtotal-values {
  display: flex;
  gap: 24rpx;
}

.subtotal-original,
.subtotal-discount,
.subtotal-actual {
  font-size: 28rpx;
  color: #333;
}

.subtotal-discount.has-discount {
  color: #FF5722;
}

/* 合计卡片 */
.total-card {
  border-radius: 8px;
background: rgba(240, 246, 255, 1);
  padding: 32rpx;
  margin: 0 32rpx 24rpx;
}

.total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24rpx;
  border-bottom: 1rpx solid #F0F0F0;
  margin-bottom: 24rpx;
  color: rgba(51, 51, 51, 1);
font-family: HarmonyOS Sans SC;
font-size: 28rpx;
font-weight: 700;
line-height: 32rpx;
}

.total-label {
  /* font-size: 32rpx;
  color: #333; */
  /* font-weight: 500; */
}

.total-value {
  /* font-size: 40rpx;
  color: #333; */
  /* font-weight: bold; */
}

.savings-info {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.savings-text {
  font-size: 28rpx;
  color: #666;
}

.savings-amount {
  font-size: 32rpx;
  color: #4A90E2;
  font-weight: 500;
}

.savings-formula {
  font-size: 24rpx;
  color: #999;
}

/* 温馨提示 */
.tips-card {
  /* background: #fff; */
  border-radius: 20rpx;
  margin: 0 32rpx;
  overflow: hidden;
}

.tips-header {
  /* background: #333; */
  padding: 24rpx 32rpx;
}

.tips-title {
  color: rgba(51, 51, 51, 1);
font-family: HarmonyOS Sans SC;
font-size: 32rpx;
font-weight: 700;
line-height: 38rpx;
}

.tips-content {
  padding: 24rpx 32rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.tip-item {
  color: rgba(153, 153, 153, 1);
font-family: HarmonyOS Sans SC;
font-size:24rpx;
font-weight: 400;
line-height: 28rpx;
}
</style>
